<template>
  <div class="icon_tabber">
    <van-tabbar v-model="active" active-color="#ee0a24" @change="handleChange">
      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  // import {
  //   getColumn
  // } from '@/api/home'
  export default {
    name: 'TabBar',
    props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        active: 0,
        name: '',
        list:[]
      }
    },
    created() {
      this.name = this.$route.name
      // this.infoData()
    },
    methods: {
      infoData() {
        getColumn({
          type: 0
        }).then(res => {
          this.list = res.data
          this.choice()
        })
      },
      choice(){
        for (let i = 0; i < this.list.length; i++) {
          if(this.name == this.list[i].url){
            this.active = i
          }
        }
      },
      handleChange(value) {
        this.$emit('change', value)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .icon_tabber{
    /* height: 84px; */
    
  }
</style>
